<script type="text/javascript" src='{$base_dir}js/AJAX_AutoCorrect.js'></script>
<form name="addWordForm" id="addWordForm">
<table id="userDictionary" class="grid" cellspacing="0" cellpadding="0" width="100%">
	<thead>
		<tr>
			<th style='width: 30%'>{translate}Replace words{/translate}</th>
			<th style='width: 60%'>{translate}By words / phrase{/translate}</th>
			<th style='width: 10%'>&nbsp;</th>
		</tr>
	</thead>
	<tbody>
		<tr id="addItem">
			<td><input type="text" name="abbreviation" id="abbreviation" style='width: 99%' value=""/></td>
			<td><input type="text" name="replacedText" id="replacedText" style='width: 99%' value=""/></td>
			<td style='text-align: center'><a href="javascript:addDictionaryItem();"><img class='imgBtn' src='../images/add_small.png' border='0' title="{translate}Add{/translate}"/></a></td>
		</tr>
	{foreach from=$dictionary item=item}
		<tr id="{$item.id}">
			<td>{$item.abbreviation}</td>
			<td>{$item.replaced_text}</td>
			<td style='text-align: center'><a href="javascript:deleteDictionaryItem({$item.id});"><img class='imgBtn' src='../images/remove_small.png' border='0' title="{translate}Delete{/translate}"/></a></td>
		</tr>
	{/foreach}
	</tbody>
</table>
</form>